
import React from 'react';
import classNames from 'classnames';

import { Link } from 'react-router';

import {
  ListGroup,
  ListGroupItem
} from 'react-bootstrap';

class RechargeSelector extends React.Component {
  
  constructor(){
    super();
  }

  static propTypes = {
     
  }

  static defaultProps = {
     
  }

  onSelectorClick(){
  	let { onSelectorClick, item } = this.props;

    onSelectorClick(item);
  }

  renderSelectorHeader () {
     let { item } = this.props;
  	 return (
  	 	<a onClick={ this.onSelectorClick.bind(this) }>
	    	<div className="list-head">
	    	 	{ 
	    	 		item.icon ? 
	    	 		<img src={item.icon} className="list-icon"/>	
	    	 		: null
	    	 	}
	        <h4 className="list-title text-info">{item.name}</h4>
	        {
		        item.descr ? 
		        <div className="list-descr">
		          {item.descr}
		        </div>
		        : null
	        }
	      </div>

        { this.renderSelectorState() }
      </a>
  	 );
  }

  renderSelectorState(){
     let { active } = this.props;

     if (active === true) {
        return (
            <div className="list-caret">
              <i className="iconfont icon-yes text-danger font-24"></i>
            </div>
        );
     }

     return null;
  }

  render(){

      let { item, active, className, ...other } = this.props;

      let selectorClass = classNames("list-item", className);

      let selectorHeader = this.renderSelectorHeader();

      return (
      	<ListGroupItem { ...other } className={ selectorClass }  header={ selectorHeader }>
      	</ListGroupItem>
      )
  }
}

export default RechargeSelector;